import { KEY_CODE } from "@/constant/key_code";
import { Input } from "antd";
import { useState } from "react";

interface HotkeyInputProps {
  value?: string;
  onChange?: (value: string) => void;
}

const HotkeyInput: React.FC<HotkeyInputProps> = ({ value, onChange }) => {
  const [hotkey, setHotkey] = useState(value || "");

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    console.log(e);
    const keys = [];
    let key = KEY_CODE.find((item) => item.code === e.keyCode)?.key;
    if (!key) {
      return;
    }
    key = key.toUpperCase();
    keys.push(key);
    const newHotkey = keys.join(" + ");
    setHotkey(newHotkey);
    onChange?.(newHotkey);
  };

  return (
    <Input
      allowClear
      placeholder="请输入快捷键"
      value={hotkey}
      onKeyDown={handleKeyDown}
      onChange={(e) => setHotkey(e.target.value)}
      onClear={() => {
        setHotkey("");
        onChange?.("");
      }}
    />
  );
};

export default HotkeyInput;
